<template>
  <div class="hello">
    <el-row>
      <el-col :span="24">
        <el-form ref="form" :model="form" label-width="80px"  :inline="true" >
          <el-form-item label="患者姓名" placeholder="患者姓名">
            <el-autocomplete
              class="inline-input"
              v-model="form.name"
              :fetch-suggestions="querySearch"
              placeholder="患者姓名"
              @select="handleSelect"
            ></el-autocomplete>
          </el-form-item>

          <el-form-item label="患者卡号">
            <el-input v-model="form.number" placeholder="请输入病人卡号"></el-input>
          </el-form-item>
          <el-form-item label="患者年龄">
            <el-input v-model="form.age" placeholder="请输入年龄"></el-input>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.userdate" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="form.sex" placeholder="选择性别">
              <el-option label="男" :value="1"></el-option>
              <el-option label="女" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
          </el-form-item>
          <!--<el-form-item label="省市区"  >-->
          <!--<el-cascader :props="props"></el-cascader>-->
          <!--</el-form-item>-->
        </el-form>

      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16">
        <el-table
          :data="yaos"
          style="width: 100%">
          <el-table-column
            label="序号"
            width="50">
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column
            label="组号"
            width="80">
            <template slot-scope="scope">
              <el-select v-model="scope.row.orderid" >
                <el-option label="1" value="1"></el-option>
                <el-option label="2" value="2"></el-option>
                <el-option label="3" value="3"></el-option>
                <el-option label="4" value="4"></el-option>
                <el-option label="5" value="5"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="名称"
            prop="name"
            width="100">
          </el-table-column>
          <el-table-column
            label="单次用量"
            width="100">
            <template slot-scope="scope">
              <el-input v-model="scope.row.sums" ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="用法"
            width="100">
            <template slot-scope="scope">
              <el-select v-model="scope.row.yongfa" >
                <el-option label="口服" value="1"></el-option>
                <el-option label="外用" value="2"></el-option>
                <el-option label="皮试" value="3"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="频度"
            width="140">
            <template slot-scope="scope">
              <el-select v-model="scope.row.pindu" >
                <el-option label="一天一次" value="1" ></el-option>
                <el-option label="一天两次" value="2" ></el-option>
                <el-option label="一天三次" value="3" ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="天数"
            width="80">
            <template slot-scope="scope">
              <el-select v-model="scope.row.tianshu" >
                <el-option label="1" value="1"></el-option>
                <el-option label="2" value="2"></el-option>
                <el-option label="3" value="3"></el-option>
                <el-option label="4" value="4"></el-option>
                <el-option label="5" value="5"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="总量"
            width="80">
            <template slot-scope="scope">
              <el-input v-model="scope.row.number" ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            width="80">
            <template slot-scope="scope">
              <el-select v-model="scope.row.numbertype" >
                <el-option label="瓶" value="1"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="单价"
            width="100">
            <template slot-scope="scope">
              <el-input v-model="scope.row.price" ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="编辑"
            width="80">
            <template slot-scope="scope">
              <el-button type="button" size="small" @click="ooo(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>


      </el-col>
      <el-col :span="8">
        <el-table
          ref="multipleTable"
          :data="yao"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称"
            width="120">
          </el-table-column>
          <el-table-column
            prop="type"
            label="规格"
            width="120">
          </el-table-column>
          <el-table-column
            prop="number"
            label="库存"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="price"
            label="价格"
            show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-button @click="toggleSelection">添加药品</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark">
        <el-button @click="save">保存</el-button>
        <el-button @click="save">收费</el-button>
        <el-button @click="del">取消</el-button>

      </div></el-col>
    </el-row>
  </div>
</template>

<script>
  const axios = require("axios");
  const basePath = "http://127.0.0.1:9999/";
  export default {
    name: 'HelloWorld',
    data() {
      return {
        yaos:[],
        multipleSelection: [],//药品选择列表
        restaurants:[],//name选择
        users:[],//usr
        yao:[],
        form: {},
      }
    },
    methods: {
      save(){
        let $this=this

          axios({
            url:basePath+"saveOrders",
            method:"post",
            data:this.yaos
          }).then(res=>{
            if(res.data.code==200){
              this.$router.push({path: 'payment',query:{ userid:$this.form.id}})
            }
          })
      },
      del(){
      this.yaos=[]
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      toggleSelection() {
        this.yaos=[];
        if(this.form.id==null){
          this.$message("请选择用户")
          return
        }
        this.multipleSelection.forEach(a=>{
          var toYao={orderid:1,sums:1,yongfa:"1", pindu:"1", tianshu:1, number:1, numbertype:"1",price:a.price,name:a.name,userid:this.form.id}
          this.yaos.push(toYao)
        })
      },

      //-------
      handleSelect(item) {
        this.users.forEach(a=>{
          if(item.address==a.id){
            this.form=a;
          }
        })
      },
      //name
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(restaurants);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      //----------

    },
    mounted(){
      let $this=this;
      axios({
        url:basePath+"selectUsers",
        method:"get"
      }).then(res=>{
        console.log(res)
        var b=  new Array();
        res.data.obj.forEach(a=>{
         var s={"value":a.name,"address":a.id}
         b.push(s)
        })
        $this.restaurants=b;
        $this.users=res.data.obj;
      });
      axios({
        url:basePath+"getYao",
        method:"get"
      }).then(res=>{
        console.log(res.data.obj)
      $this.yao=res.data.obj
      })
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
